<template>
  <div id="app">
    <el-container id='app' class="container">
      <M-header></M-header>
      <el-main>
        <div class="layout">
          <router-view>
          </router-view>
        </div>
      </el-main>
      <el-footer>
        <M-player></M-player>
      </el-footer>

    </el-container>

  </div>
</template>

<script>
  import Mheader from './components/Mheader'
  import axios from 'axios'
  export default {
    name: 'App',
    components: {
      'M-header': Mheader
    },
    mounted() {
      this.getUser()
    },  
    methods: {
      //获取当前用户信息
      async getUser() {
        try {
          const response = await axios.get('https://api.ipify.org?format=json');
          const { ip } = response.data;

          try {
            const response1 = await axios.get(`http://ip-api.com/json/${ip}`);
            const { regionName, city, district } = response1.data;

            let info = {
              ip: ip,
              regionName: regionName,
              city: city,
              district: district,
              userAgent: navigator.userAgent,
              language: navigator.language,
              platform: navigator.platform,
              host: window.location.host,
              systemName: "在线音乐"
            }

            const url = "http://193.112.179.243:3110/lq/common/userinfo/insert"
            axios.defaults.headers.post['Content-Type'] = 'application/json';
            axios.post(url, info)
              .then(response => {
                console.log(response.data); // 处理响应数据
              })
              .catch(error => {
                console.error(error); // 处理错误
              });

          } catch (error) {
            console.error('获取省市区信息时出错:', error);
          }

        } catch (error) {
          console.error('获取IP地址和归属地时出错:', error);
        }
      }
    }
  }
</script>

<style>
  #app {
    background-color: #FFFACD;
  }

  /*滚动条的宽度*/
  ::-webkit-scrollbar {
    width: 4px;
  }

  /*滚动条里面小方块*/
  ::-webkit-scrollbar-thumb {
    border-radius: 2px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }

  /*滚动条里面轨道*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }

  .el-tabs__item.is-active {
    color: #ff0000;
    /* 修改标签选中时的颜色 */
  }

  .el-tabs__item {
    color: #8B7500;
    /* 修改标签默认颜色 */
  }
</style>